<template>
<!-- 互动设置 -->
  <div class="container">
    <v-header :title="title"></v-header>

    <div class="content">
      <div class="top-bar">开启后将在图片直播时开启相应的功能</div>
      <div class="main">
        <ul class="list">
          <li class="list-item">
            <span class="text">点赞和评论</span>
            <div class="mui-switch mui-switch-mini mui-active">
              <div class="mui-switch-handle"></div>
            </div>
          </li>
          <li class="list-item">
            <span class="text">摄影师信息</span>
            <div class="mui-switch mui-switch-mini">
              <div class="mui-switch-handle"></div>
            </div>
          </li>
          <li class="list-item">
            <span class="text">照片信息</span>
            <div class="mui-switch mui-switch-mini">
              <div class="mui-switch-handle"></div>
            </div>
          </li>
          <li class="list-item">
            <span class="text">启动页倒计时</span>
            <div class="mui-switch mui-switch-mini">
              <div class="mui-switch-handle"></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

import VHeader from 'components/v-header'

export default {
  data() {
    return {
      title: '互动设置'
    }
  },
  components: {
    VHeader
  }
}
</script>

<style scoped lang="stylus">

@import '../../common/stylus/mixin.styl'
@import '../../common/stylus/variable.styl'

.container
  position fixed
  width 100%
  height 100%
  background-color $color-bg-gray
  .content
    .top-bar
      height 40px
      line-height 40px
      padding-left 20px
      font-size $font-size-small
      color #999
    .main
      .list
        background-color #fff
        .list-item
          display flex
          justify-content space-between
          align-items center
          height 50px
          padding 0 20px
          border 1px solid $color-bg-gray  
          .text
            font-size $font-size-small
          .mui-active
            background-color $color-theme
            border-color $color-theme


</style>
